<!--
 * @Author: 敬华丰 2637844016@qq.com
 * @Date: 2023-08-17 14:57:44
 * @LastEditors: 敬华丰 2637844016@qq.com
 * @LastEditTime: 2023-08-18 09:11:59
 * @FilePath: \出口卖家端\src\views\SettleAccount\CarPaymentSettlement\components\c-settlement-details.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <!-- 结算记录 -->
  <el-dialog
    v-model="dialogVisible"
    title="结算记录"
    width="50%"
    :before-close="handleClose"
  >
    <el-row>
      <el-col :span="11">
        <div class="flex-y-center">
          <div class="mr-lg f-s-14">结算单号：</div>
          <el-input
            size="large"
            placeholder="请输入结算单号"
            v-model="querys.id"
            class="wh flex-1 mr-lg"
          />
        </div>
      </el-col>
      <el-col :span="13">
        <div class="flex-x-end">
          <el-button size="large" @click="handleReset">重 置</el-button>
          <el-button size="large" type="primary" @click="handleSelect"
            >查 询</el-button
          >
        </div>
      </el-col>
      <el-col :span="24" class="mt-lg">
        <c-table-template v-loading="loading" :data="tableData" border>
          <el-table-column label="结算单号" prop="id" align="center" />
          <el-table-column label="结算金额" prop="amount" align="center">
            <template #default="scope">
              {{ filters.thousands(scope.row.amount) }}
            </template>
          </el-table-column>
          <el-table-column label="结算状态" align="center">
            <template #default="scope">
              {{ getStatusLabel(billType, scope.row.status) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template #default="scope">
              <el-button
                link
                size="small"
                class="mr-sm"
                type="primary"
                @click="handleDetails(scope.row)"
              >
                <span>查看明细</span>
              </el-button>
            </template>
          </el-table-column>
        </c-table-template>
      </el-col>
    </el-row>

    <template #footer>
      <el-button size="large" @click="handleClose">取 消</el-button>
    </template>
  </el-dialog>
  <c-settlement-details ref="cSettlementDetailsRef" />
</template>
<script setup>
import { ref, getCurrentInstance } from "vue";
import { ElMessage } from "element-plus";
import { getStatusLabel, billType } from "@/utils/status.js";
import { useBasicsTable } from "@/hooks/useTable.js";
import cSettlementDetails from "./c-settlement-details.vue";
const { proxy } = getCurrentInstance();
const dialogVisible = ref();
const cSettlementDetailsRef = ref();
const handleDetails = (item) => {
  cSettlementDetailsRef.value.handleOpen(item);
};
const handleOpen = () => {
  dialogVisible.value = true;
  handleReset();
};

const {
  querys,
  tableData,
  total,
  loading,
  tableList,
  handleSelect,
  handleReset,
  handleSizeChange,
  handleCurrentChange,
} = useBasicsTable({
  url: "/sellerSettle/sellerDetailPage",
});
const handleClose = () => {
  dialogVisible.value = false;
};
defineExpose({
  handleOpen,
});
</script>

